<template>
  <div class="main">
    <div class="title">位置周边</div>
    <div class="map" ref="mapEle"></div>
    <div class="footer">查看周边更多信息</div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
let mapEle = ref();
const props = defineProps(['position'])
onMounted(() => {
  // console.log(mapEle.value);
  var map = new BMapGL.Map(mapEle.value);          // 创建地图实例 
  const point = new BMapGL.Point(props.position.longitude, props.position.latitude); // 创建点坐标 
  map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  const marker = new BMapGL.Marker(point);
  map.addOverlay(marker)
})
</script>
<style lang="less" scoped>
.main {
  padding: 16px 16px 35px;
  background-color: #fff;
  position: relative;

  .title {
    font-weight: 700;
    font-size: 20px;
    color: rgb(51, 51, 51);
    text-align: justify;
    line-height: 24px;
    overflow: hidden;
    padding: 0 0 12px;
    margin-bottom: 8px;
    border-bottom: 2px solid #f7f9fb;
  }

  .map {
    height: 250px;
    width: 100%;
  }

  .footer {
    color: rgb(255, 150, 69);
    position: absolute;
    right: 20px;
    line-height: 44px;
    color: #ff9645;
    font-size: 14px;
    font-weight: 600;

    &::after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-left: 1px solid rgb(255, 150, 69);
      border-bottom: 1px solid rgb(255, 150, 69);
      transform: rotate(223deg);
      margin-left: 8px;
    }
  }
}
</style>
